<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>六芒星</title>
  <style>

  </style>
</head>

<body>
  <input type="text" id="mj0" placeholder="输入面积" onchange="output()" style="width: 100px;">
  <input type="color" id="color" onchange="chooseColor()"/>
  <input type="text" id="num" style="width: 50px;">px
  <button onclick="add()">大这么多</button>
  <button onclick="reduce()">小这么多</button>
  <div class="star">
    <div class="co"></div>
  </div>
  <script>
    var gh3 = Math.pow(3,0.5);
    var color = document.querySelector('#color')
    var star = document.querySelector('.star')
    var co = document.querySelector('.co')
    var mj0 = document.querySelector('#mj0')
    
    
    // 调大
    function add() {
      var num_mj = Number(mj0.value)
      num_mj += Number(document.querySelector('#num').value)
      output()
      mj0.value = num_mj
    }
    // 调小
    function reduce() {
      var num_mj = Number(mj0.value)
      num_mj -= Number(document.querySelector('#num').value)
      output()
      mj0.value = num_mj
    }
    // 选择颜色
    function chooseColor() {
      output()
    }
    // 选择尺寸后输出六芒星
    function output() {
      var num_mj = Number(mj0.value)
      var bianchang = 0.5*num_mj/gh3
      star.setAttribute('style', `border-left: ${0.5*bianchang}px solid transparent;
                                  border-right: ${0.5*bianchang}px solid transparent;
                                  border-top: ${0.5*bianchang*gh3}px solid ${color.value};
                                  position: relative;
                                  top: 40vh;
                                  left: 40vw;
                                  width: 0;
                                  height: 0;`
      );
      co.setAttribute('style', `border-left: ${0.5*bianchang}px solid transparent;
                                  border-right: ${0.5*bianchang}px solid transparent;
                                  border-bottom: ${0.5*bianchang*gh3}px solid ${color.value};
                                  position: absolute;
                                  top: -${bianchang*gh3/1.5}px;
                                  left: -${0.5*bianchang}px;`
      );
    }
  </script>
</body>

</html>